/**
  国际交流开关设置
*/
<template>
    <div>
        <condition-card
            ref="baseAssessSetCondition"
            @reset="reset"
            @search="onSubmit"
            label-position="right"
            label-width="150px"
        >
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                    <el-form-item :label="$t('internationalSwitch.college')">
                        <DictSelect
                            v-model="queryForm.condition.collegeId"
                            filterable
                            :data="options.title"
                            :plzSelect="true"
                        ></DictSelect>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item :label="$t('internationalSwitch.projectCategory')" prop="typeId">
                        <el-select
                            v-model="queryForm.condition.typeId"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.typeId"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        :label="$t('internationalSwitch.projectSubcategory')"
                        prop="childTypeId"
                    >
                        <el-select
                            v-model="queryForm.condition.childTypeId"
                            clearable
                            style="width: 100%"
                            ref="child"
                        >
                            <el-option
                                v-for="item in options.childTypeId"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                    <!-- <el-form-item :label="$t('项目名称')">
                        <el-select
                            v-model="queryForm.condition.projectName"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.projectName"
                                :key="item.projectId"
                                :label="item.projectName"
                                :value="item.projectId"
                            ></el-option>
                        </el-select>
                    </el-form-item>-->
                    <el-form-item :label="$t('internationalSwitch.entryName')">
                        <el-input
                            v-model="queryForm.condition.projectName"
                            clearable
                            :placeholder="$t('请输入')"
                            :maxlength="32"
                            style="width: 100%"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('internationalSwitch.enableStatus')">
                        <el-select
                            v-model="queryForm.condition.enableFlag"
                            clearable
                            style="width: 100%"
                        >
                            <el-option label="启用" :value="1"></el-option>
                            <el-option label="停用" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{$t('internationalSwitch.permissionList')}}</h1>
            <div class="edu-opertion-bar sub-title">
                <div class="float-right" style="display: flex;">
                    <el-button type="primary" @click="exportAdd">{{$t('internationalSwitch.add')}}</el-button>
                    <el-button
                        type="danger"
                        @click="batchDeleteClick()"
                    >{{$t('internationalSwitch.delete')}}</el-button>
                </div>
            </div>
            <edu-table
                :pagination="false"
                :tooltipEffect="tooltipEffect"
                ref="mainTable"
                stripe
                :data="dataList"
                size="mini"
                @selection-change="handleSelectionChange"
            >
                <edu-table-column :label="$t('internationalSwitch.college')" prop="collegeName"></edu-table-column>
                <edu-table-column
                    :label="$t('internationalSwitch.projectCategory')"
                    prop="typeName"
                ></edu-table-column>
                <edu-table-column
                    :label="$t('internationalSwitch.projectSubcategory')"
                    prop="childTypeName"
                ></edu-table-column>
                <edu-table-column :label="$t('internationalSwitch.entryName')" prop="projectName"></edu-table-column>
                <edu-table-column :label="$t('internationalSwitch.startTime')" prop="startTime"></edu-table-column>
                <edu-table-column :label="$t('internationalSwitch.endTime')" prop="endTime"></edu-table-column>
                <edu-table-column
                    :label="$t('internationalSwitch.switchSettings')"
                    prop="enableFlag"
                >
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.enableFlag"
                            active-color="#13ce66"
                            inactive-color="#dcdfe6"
                            @change="changeSwitch(scope.row)"
                        ></el-switch>
                    </template>
                </edu-table-column>
                <edu-table-column :label="$t('internationalSwitch.operate')" fit width="150">
                    <template slot-scope="props">
                        <el-button
                            type="text"
                            @click="editOutline(props.row)"
                        >{{$t('internationalSwitch.edit')}}</el-button>
                        <el-button
                            type="text"
                            @click="deleteOne(props.row)"
                        >{{$t('internationalSwitch.delete')}}</el-button>
                    </template>
                </edu-table-column>
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <!-- 新增 -->
        <el-dialog
            @close="dataObjit={}"
            :before-close="beforeClose"
            :title="titleList"
            width="50%"
            :visible.sync="addflag"
            :show-close="beforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <internationalSwitchAdd
                ref="addform"
                @cancel-dialog="changeClose"
                :dataQueryForm="dataQueryForm"
                :dataProp="dataProp"
                :showFlag="addflag"
                :dataListProp="dataObjit"
                @close="(flag) => { addflag = flag }"
                @affirm-form="addrmForm"
            ></internationalSwitchAdd>
        </el-dialog>

        <!-- 编辑 -->
        <el-dialog
            @close="dataEdit={}"
            :before-close="editClose"
            :title="$t('编辑')"
            width="70%"
            :visible.sync="editflag"
            :show-close="editClose"
        >
            <internationalSwitchEdit
                ref="editform"
                @cancel-eidt="dialogClose"
                :dataList="queryForm"
                :dataProp="editProp"
                :showFlag="editflag"
                :dataListProp="dataEdit"
                @close="(flag) => { editflag = false }"
                @affirm-edit="editrmForm"
            ></internationalSwitchEdit>
        </el-dialog>
        <edu-export-dialog
            :disabled="exportButton"
            :title="$t('message.prompt')"
            ref="downloadRef"
            :data="exportResult"
        ></edu-export-dialog>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import internationalSwitchAdd from 'common/src/views/switchAndResourceManagement/component/internationalSwitchAdd'
import internationalSwitchEdit from 'common/src/views/switchAndResourceManagement/component/internationalSwitchEdit'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'

export default {
    components: {
        internationalSwitchAdd,
        internationalSwitchEdit
    },
    data() {
        return {
            indexKey: '1', // 面包屑
            title: '',
            titleList: '',
            fileList: [],
            category: { category: 1 },
            showDate: true,
            addflag: false,
            editflag: false,
            tableFlag: false,
            dataQueryForm: {},
            copyDialog: false,
            exportButton: false,
            exportResult: null,
            dataList: [],
            multipleSelection: [],
            provideData: {}, // 提供子组件表格数据
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    collegeId: null,
                    typeId: null,
                    childTypeId: null,
                    projectName: '',
                    enableFlag: null
                }
            },
            dataProp: '',
            editProp: '',
            dataListProp: {},
            dataEdit: {},
            copyTime: {
                time: ''
            },
            options: {
                facultys: [],
                timeList: [],
                title: [],
                sex: [],
                typeId: [],
                childTypeId: [],
                projectName: []
            },
            id: '',
            formsLearn: [],
            breadPath: {
                label: this.$t('graduate.graduate'),
                key: '1',
                children: [
                    {
                        key: '2',
                        label: ''
                    }
                ]
            }
        }
    },
    watch: {
        //项目子类别改变
        'queryForm.condition.typeId': function(newVal, oldVal) {
            if (this.queryForm.condition.typeId == 2) {
                interAcaConference
                    .projectTypesSelect({
                        parentId: 2,
                        selectFlag: 0
                    })
                    .then(res => {
                        if (res.code === 200 && res.data.length > 0) {
                            this.options.childTypeId = res.data
                        }
                    })
            } else {
                this.queryForm.condition.childTypeId = ''
                this.options.childTypeId = null
            }

            if (this.queryForm.condition.typeId == 3) {
                interAcaConference
                    .listProject({
                        type: 2
                    })
                    .then(res => {
                        if (res.code === 200 && res.data.length > 0) {
                            this.options.projectName = res.data
                        }
                    })
            } else {
                this.queryForm.condition.childTypeId = ''
                this.options.projectName = null
            }
        }
    },
    filters: {
        collegeAcademyList(val, array) {
            let str = ''
            for (let item of array) {
                if (val == item.value) {
                    str = item.label
                }
            }
            return str
        },
        enableFlag(val) {
            switch (val) {
                case 0:
                    return '停用'
                case 1:
                    return '启用'
                default:
                    return val
            }
        }
    },
    created() {
        this.postApproveAgree(this.queryForm)
        this.changeTypeId()
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        // 项目类别
        changeTypeId() {
            interAcaConference
                .projectTypesSelect({
                    selectFlag: 0
                })
                .then(res => {
                    if (res.code === 200 && res.data.length > 0) {
                        this.options.typeId = res.data
                    }
                })
        },

        querySearchList(queryString, cb) {
            let restaurants = this.formsLearn
            let results = queryString
                ? restaurants.filter(this.createFilterList(queryString))
                : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilterList(queryString) {
            return restaurant => {
                return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
            }
        },
        postApproveAgree(date) {
            interAcaConference.exchangeSwitch(date).then(res => {
                this.queryForm.pageNum_ = res.data.pageNum_
                this.queryForm.pageSize_ = res.data.pageSize_
                this.queryForm.total_ = res.data.total_
                this.dataList = res.data.list
                this.dataList.forEach(el => {
                    el.enableFlag = el.enableFlag == 1 ? true : false
                })
            })
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX', 'G_XBIE']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'X_YX',
                        sex: 'G_XBIE'
                    },
                    res.data,
                    this.options
                )
            })
        },
        // 搜索/筛选
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },

        // 新增
        exportAdd() {
            this.title = this.$t('graduate.add')
            this.titleList = this.$t('graduate.add')
            this.dataProp = '新增'
            this.dataQueryForm = this.queryForm
            this.addflag = true
        },
        // 取消
        changeClose(param) {
            this.addflag = param
        },
        // 编辑关闭
        editClose() {
            this.$refs.editform.cancelDialog()
        },

        dialogClose() {
            this.editflag = false
        },
        //编辑保存
        editrmForm(param, data) {
            if (param.typeId == 2 && param.childTypeId == 6) {
                param['projectType'] = 3
            } else if (param.typeId == 3) {
                param['projectType'] = 2
            }else {
               param['projectType'] = null
            }

            interAcaConference.exchangeSwitchEdit(param).then(res => {
                this.$message.success(this.$t('internship.successfully'))
                this.editflag = false
                this.postApproveAgree(data)
                this.$refs.editform.confirmInner()
            })
        },
        // 取消
        beforeClose(param) {
            this.$refs.addform.cancelDialog()
        },
        // 新增保存
        addrmForm(param, data) {
            if (param.typeId == 2 && param.childTypeId == 6) {
                param['projectType'] = 3
            } else if (param.typeId == 3) {
                param['projectType'] = 2
            }

            interAcaConference.exchangeSwitchAdd(param).then(res => {
                this.$message.success(this.$t('internship.successfully'))
                this.addflag = false
                this.postApproveAgree(data)
                this.$refs.addform.confirmInner()
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 编辑
        editOutline(row) {
            let params = {
                id: row.id
            }
            interAcaConference.exchangeSwitchDetail(params).then(res => {
                this.editProp = '编辑'
                this.titleList = this.$t('graduate.edit')
                this.dataEdit = res.data
                this.dataQueryForm = this.queryForm
                this.editflag = true
            })
        },
        // 批量删除
        batchDeleteClick() {
            let delFlag = this.multipleSelection.every(item => !item.enableFlag)
            if (this.multipleSelection.length < 1) {
                this.$message.error(this.$t('请勾选数据'))
                return
            }
            if (!delFlag) {
                this.$message.error(this.$t('启用状态的开关不能删除'))
                return
            }
            let param = this.multipleSelection.map(item => {
                return item.id
            })
            this.$delConfirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt'), {
                confirmButtonText: this.$t('message.confirm'),
                cancelButtonText: this.$t('message.cancel'),
                type: 'warning'
            }).then(() => {
                interAcaConference.exchangeSwitchDelete(param).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功')
                        this.onSubmit()
                    }
                })
            })
        },
        // 开关设置
        changeSwitch(row) {
            let enableFlag = 0
            if (row.enableFlag === 0) {
                enableFlag = 1
            } else if (row.enableFlag === 1) {
                enableFlag = 0
            } else if (row.enableFlag == false) {
                enableFlag = 0
            } else if (row.enableFlag == true) {
                enableFlag = 1
            }
            interAcaConference
                .exchangeSwitchChangeDelete({
                    id: row.id,
                    enableFlag: enableFlag
                })
                .then(res => {
                    this.onSubmit()
                })
        },
        // 单个删除
        deleteOne(row) {
            if (row.enableFlag == 0) {
                this.$delConfirm().then(_ => {
                    let param = [row.id]
                    interAcaConference.exchangeSwitchDelete(param).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: this.$t('externamExchangeBase.operateSuccessfully')
                            })
                            this.onSubmit()
                        }
                    })
                })
            } else {
                this.$message({
                    type: 'error',
                    message: this.$t('启用状态的开关不能删除')
                })
            }
        },

        // 重置
        reset() {
            this.queryForm.condition.collegeId = null
            this.queryForm.condition.typeId = null
            this.queryForm.condition.childTypeId = null
            this.queryForm.condition.projectName = ''
            this.queryForm.condition.enableFlag = null
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        // 保存
        conserve() {
            this.addflag = false
        },

        diaCancel() {
            this.$refs['copyTime'].resetFields()
            this.copyDialog = false
        },

        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.postApproveAgree(this.queryForm)
        }
    }
}
</script>
<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.edu-page-title {
    span {
        line-height: 24px;
        display: inline-block;
        padding-right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #2b3b4e;
    }
}
.sub-title {
    margin: 16px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
.form-item {
    width: 312px;
    height: 32px;
    float: left;
    margin: 0px 10px;
}
.is-enabled-container ::v-deep {
    .el-button {
        cursor: auto;
    }
    .el-button--danger {
        padding: 9px 15px;
        min-width: 0;
    }
}
.inputBox {
    width: 240px !important;
    height: 32px !important;
}
.atooltip {
    background: beige;
    border: black;
}
</style>
